<script setup>
import { Monitor } from '@element-plus/icons-vue';
import { ref } from 'vue'
const settings = defineProps({
  collapse: Boolean,
  width: String
})

const iconColor = ref('color:#F8FAFB')
</script>

<template>
  
  <el-aside :width="settings.width">
   
    <el-scrollbar>
    <el-menu :default-openeds="['1', '3']" 
      :collapse="settings.collapse" active-text-color="#ffd04b"
        background-color="#304156" text-color="#FFFFFF" router="true">
<<<<<<< HEAD
        <el-menu-item>
          <!-- <el-icon style="display: flex;">
            <img src="../assets/login1.jpg"  style="width: 40px; height: 40px; margin-left: 6px;">
            <span style="flex:1">1223</span> 
          </el-icon> -->
          <el-icon><component><img src="../assets/login1.jpg" class="img"></component> </el-icon>
          <span>实验室预约系统</span>
        </el-menu-item>
      <template v-for="menu in this.$router.options.routes" :key="menu">
=======
 
    <template v-for="menu in this.$router.options.routes" :key="menu">
>>>>>>> 1a7cbadc4c4776ea27180c3435334a4f9e10a7a6
    <!-- 当前菜单项没有子菜单时 -->
    <el-menu-item v-if=" !menu.children&&menu.name" :index="menu.path">
      <el-icon><component :is="menu.icon" ></component> </el-icon>
      <span>{{menu.name}}</span> 
    </el-menu-item>
    
    <!-- 当前菜单项有子菜单时 -->
    <el-sub-menu v-else-if="menu.children" :index="menu.path">
      <template #title>
        <el-icon><component :is="menu.icon" ></component> </el-icon>
        <span>{{menu.name}}</span>
      </template>
      
      <!-- 循环遍历子菜单项 -->
<<<<<<< HEAD
      <el-menu-item v-for="child in menu.children" :key="child" :index="child.path">
        {{child.name}}
      </el-menu-item>
=======
      <template v-for="child in menu.children" :key="child"> 
        <el-menu-item v-if="child.name" :index="child.path" >
             {{child.name}}
      </el-menu-item>
      
      </template>
      
>>>>>>> 1a7cbadc4c4776ea27180c3435334a4f9e10a7a6
    </el-sub-menu>
       </template>
      
    </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<style scoped>
.el-aside {
  height: 100vh;
  overflow: hidden;
  box-shadow: var(--el-box-shadow-lighter);
}

.el-scrollbar {
  height: 100vh;
  overflow: hidden;
  background-color: #304156;
}

.el-menu {

  border-right: none;
}
.img {
  width: 25px; 
  height: 25px;
  border-radius: 20px;
  margin-right: 3px;
}
</style>